<extend name="./Application/Common/View/block/base.php" />
<block name="header">
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/Public/Admin/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/assets/css/font-awesome.css" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/jquery-ui.css" />
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ui.jqgrid.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace-fonts.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/ace-skins.min.css" />
    <link href="__PUBLIC__/css/table_form.css" rel="stylesheet" type="text/css" />
<!--    <link rel="stylesheet" href="/Public/css/jqgrid.css" />-->
</block>
<block name="bdoy">
    <body style="background: #ffffff;">
    <button data-toggle="modal" data-target="#addModal"  class="quick_search"><i class="ace-icon glyphicon glyphicon-plus orange"></i>{:LANG('add_exam')}</button>
    <!-- Modal -->
    <!-- 新增考试-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{:LANG('add_exam')}</h4>
                </div>
                <div class="modal-body">
                    <form action="__URL__/add" method="post">
                        <input type="hidden" name="grade" value="6"/>
                        <div class="form-group">
                            <label  for="examname" class="control-label">{:LANG('examname')}</label>
                            <input type="text" name="examname" id="examname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">{:LANG('save')}</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">{:LANG('close')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑考试-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{:LANG('add_exam')}</h4>
                </div>
                <div class="modal-body">
                    <form action="__URL__/add" method="post" id="edit_form">
                        <input type="hidden" name="id" id="e_id" value=""/>
                        <div class="form-group">
                            <label  for="e_examname" class="control-label">{:LANG('examname')}</label>
                            <input type="text" name="examname" id="e_examname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <button type="button" onclick="save_edit_exam()" class="btn btn-primary">{:LANG('save')}</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">{:LANG('close')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

        <div>
            <table id="grid-table" width="100%;"></table>
            <div id="grid-pager"></div>
        </div>
    </body>
</block>
<block name="footExtendJs">
    <script src='__PUBLIC__/assets/js/jquery.js'></script>
    <script src="__PUBLIC__/assets/js/bootstrap.js"></script>
    <!-- page specific plugin scripts -->
    <script src="__PUBLIC__/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/grid.locale-en.js"></script>

    <!-- inline scripts related to this page -->
    <script src="__PUBLIC__/js/common.js"></script>
    <!--    弹出框-->
    <script src="__PUBLIC__/assets/js/bootbox.js"></script>
    <script language="javascript" type="text/javascript" src="__PUBLIC__/js/formvalidator.js" charset="UTF-8"></script>
    <script language="javascript" type="text/javascript" src="__PUBLIC__/js/formvalidatorregex.js" charset="UTF-8"></script>


    <script type="text/javascript">
        function edit_exam(id){
            $('#edit_form #e_id').val(id);
            $.get('__URL__/get_name?id='+id,function(data){
                $('#edit_form #e_examname').val(data);
                $("#editModal").modal("toggle");
            });
        }

        function save_edit_exam(){
            var id = $('#edit_form #e_id').val();
            var examname = $('#edit_form #e_examname').val();
            var data = {'id':id, 'examname':examname};
            $.post('__URL__/edit', data, function(data){
                $('#editModal').modal('hide');
            });
        }

        //验证
        $.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){}});
        $("#examname").formValidator({onshow:"{:LANG('inputexam')}",onfocus:"{:LANG('examform')}"}).inputValidator({min:2,max:50,onerror:"名称应该为2-50位之间"}).ajaxValidator({
            type : "get",
            url : "__URL__/check_name",
            data :"",
            datatype : "json",
            async:'false',
            success : function(data){
                if( data.status == 0 ){
                    return true;
                }
                else{
                    return false;
                }
            },
            buttons: $("#dosubmit"),
            onerror : "{:LANG('examexist')}。",
            onwait : "{:LANG('watting')}"
        });

        jQuery(function($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            jQuery(grid_selector).jqGrid({

                url:'__URL__/get_all?grade=6',
                datatype: "json",
                height: 400,
                colModel: [{
                    label: "ID",
                    name: 'id',
                    index: 'id',
                    width: 50,
                    sorttype: "int"
                }, {
                    label: "{:LANG('grade')}",
                    name: 'grade',
                    index: 'grade',
                    width: 200
                },{
                    label: "{:LANG('examname')}",
                    name: 'examname',
                    index: 'examname',
                    width: 200
                },{
                    label: "{:LANG('opr')}",
                    name: 'myac',
                    index: 'myac',
                    width: 200,
//                        fixed: true,
                    sortable: false
                }, ],
                viewrecords: true,
                rowNum: 16,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: false,
                //toppager: true,
                multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                loadComplete: function() {
                    var table = this;
                    setTimeout(function() {
                        styleCheckbox(table);
                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                    //添加编辑按钮
                    var ids = jQuery(grid_selector).jqGrid('getDataIDs');
                    var row = jQuery(grid_selector).jqGrid('getRowData');
                    console.log(row);
                    for ( var i = 0; i < ids.length; i++) {
                        var cl = ids[i];
                        be = "<a title='{:LANG('edit')}' href='javascript:edit_exam("+cl+")'><i class=\"ace-icon fa fa-pencil-square-o bigger-160\"></i></a>&nbsp;&nbsp;" +
                        '<a target="_blank" title="{:LANG('upload')}"  href=\'javascript:open_dialog(\"__URL__/upload?id='+cl+'\")\'><i class=\"ace-icon fa fa-cloud-upload bigger-160\"></i></a>&nbsp;&nbsp;';

                        se = "<a title='{:LANG('parse')}' href='javascript:open_tab(\"/Scoreanal/Senior/parse?exam="+cl+"\")'><i class=\"ace-icon glyphicon glyphicon-align-left bigger-160\"></i></a>&nbsp;&nbsp;";
                        xe = "<a title='{:LANG('clean')}' href='javascript:open_dialog(\"__URL__/clean_parse_data?id="+cl+"\")'><i class=\"ace-icon fa fa-trash-o bigger-160 red\"></i></a>&nbsp;";
                        daochu = "<a title='{:LANG('export_parse')}' href='javascript:open_tab(\"/Scoreanal/Senior/export?exam="+cl+"\")'><i class=\"ace-icon fa fa-arrow-circle-o-down bigger-160\"></i></a>&nbsp;";;
                        var oprt = be+se+daochu+xe;
                        jQuery(grid_selector).jqGrid('setRowData', cl,{
                            myac : oprt

                        });
                    }
                },
                editurl: "__ROOT__/upload", //nothing is saved
                caption: '',
                autowidth: true,
                loadonce: true,
                shrinkToFit:true,
                autoScroll: false
            });
            //enable search/filter toolbar
            //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
            //switch element when editing inline

            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
                edit: false,
                editicon: 'icon-pencil blue',
                add: false,
                addicon: 'icon-plus-sign purple',
                del: true,
                delicon: 'icon-trash red',
                search: true,
                searchicon: 'icon-search orange',
                refresh: true,
                refreshicon: 'icon-refresh green',
                view: false,
                viewicon: 'icon-zoom-in grey'
            }, {
                //edit record form
                //closeAfterEdit: true,
                recreateForm: true,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }
            }, {
                //new record form
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }
            }, {
                //delete record form
                recreateForm: true,
                beforeShowForm: function(e) {


                    var form = $(e[0]);
                    if (form.data('styled')) return false;
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);

                },
                onClick: function(e) {
                    //alert(1);

                }
            }, {
                //search form
                recreateForm: true,
                afterShowSearch: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function() {
                    style_search_filters($(this));
                },
                multipleSearch: true
                /**
                 multipleGroup:true,
                 showQuery: true
                 */
            }, {
                //view record form
                recreateForm: true,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            });

            function style_edit_form(form) {
                //enable datepicker on "sdate" field and switches for "stock" field
                form.find('input[name=sdate]').datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
                })
                    .end().find('input[name=stock]')
                    .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove(); //ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>')
                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').remove();
                buttons.eq(0).append('<i class="icon-chevron-left"></i>');
                buttons.eq(1).append('<i class="icon-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove(); //ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>');
                buttons.eq(0).click(function(){
                    var ids = jQuery(grid_selector).jqGrid('getGridParam', 'selarrrow');
                    $.post("__URL__/deleteArray",{"ids":ids}, function(result){
                    });
                });
                buttons.eq(1).click(function(){

                });
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }

            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);
                form.data('styled', true);
            }

            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid

            function styleCheckbox(table) {
                /**
                 $(table).find('input:checkbox').addClass('ace')
                 .wrap('<label />')
                 .after('<span class="lbl align-top" />')


                 $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                 .find('input.cbox[type=checkbox]').addClass('ace')
                 .wrap('<label />').after('<span class="lbl align-top" />');
                 */
            }
            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want

            function updateActionIcons(table) {
                /**
                 var replacement =
                 {
                     'ui-icon-pencil' : 'icon-pencil blue',
                     'ui-icon-trash' : 'icon-trash red',
                     'ui-icon-disk' : 'icon-ok green',
                     'ui-icon-cancel' : 'icon-remove red'
                 };
                 $(table).find('.ui-pg-div span.ui-icon').each(function(){
							var icon = $(this);
							var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
							if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
						})
                 */
            }
            //replace icons with FontAwesome icons like above

            function updatePagerIcons(table) {
                var replacement = {
                    'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                    'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                    'ui-icon-seek-next': 'icon-angle-right bigger-140',
                    'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({
                    container: 'body'
                });
                $(table).find('.ui-pg-div').tooltip({
                    container: 'body'
                });
            }
            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
        });
    </script>
</block>
